// 新增CSS变量定义（兼容Less变量）
:root {
  // 主题色
  --primary-color: #ff2e4d; // 主色调
  --secondary-color: #666; // 辅助色
  --success-color: #52c41a; // 成功状态
  --warning-color: #faad14; // 警告状态
  --error-color: #ff4d4f; // 错误状态

  // 文本颜色
  --text-color: #333;
  --text-secondary-color: rgba(51, 51, 51, 0.8);
  --text-third-color: rgba(51, 51, 51, 0.6);

  // 保持原有Less变量兼容
  @theme-colors: {
    primary: var(--primary-color);
    secondary: var(--secondary-color);
    success: var(--success-color);
    warning: var(--warning-color);
    error: var(--error-color);
    text: var(--text-color);
    text-secondary: var(--text-secondary-color);
    text-third: var(--text-third-color);
  };
}

// 使用示例：
.text-overflow(@line:1) {
  color: var(--text-color); // 使用CSS变量
  overflow: hidden;
  text-overflow: ellipsis;

  & when (@line = 1) {
    white-space: nowrap;
  }

  & when (@line > 1) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
  }
}
// 移动端1px解决方案
.border-1px(@direction: bottom,@color: rgba(0,0,0,0.08)) {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    left: 0;
    @{direction}: 0;
    width: 100%;
    border-@{direction}: 1px solid @color;
    transform-origin: 0 0;

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
      transform: scaleY(0.5);
    }

    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
      transform: scaleY(0.333);
    }
  }
}

